<template>
	<view>
		<u-popup :show="popupShow" mode="center" :round="10" @close="popupClose" @open="popupOpen" :closeOnClickOverlay="false">

			<view class="popup-box">

				<view class="popup-title">
					请输入安全密码
				</view>

				<view class="popup-subhead">
					请输入六位数安全密码
				</view>

				<view class="input flex-no-horizontal">
					<u-code-input mode="box" dot @change="passwordChange" size="38.5" hairline></u-code-input>
				</view>

				<view class="popup-bottom flex-no-horizontal">

					<view>
						<u-button type="primary" class="popup-bottom-cancel" text="取消" @click="popupCancel"></u-button>
					</view>

					<view>
						<u-button type="primary" class="popup-bottom-confirm" text="确定" @click="popupConfirm"></u-button>
					</view>

				</view>

			</view>

		</u-popup>
	</view>
</template>

<script>
	export default {
		props:{
			popupShow:{
				type:Boolean,
				default (){
					return true;
				}
			}
		},
		data() {
			return {

			};
		},
		computed: {

		},
		methods: {

			popupClose(){

			},

			popupOpen(){

			},

			popupCancel(){
				this.$emit('popupHide',false)
			},

			popupConfirm(){
				this.$emit('popupConfirm')
			},

			//资产密码变化
			passwordChange(e){
				console.log(e)
				this.$emit('passwordChange',e)
			},

		},
	};
</script>

<style lang="scss">
	.popup-box {
		width: 560rpx;
		height: 100%;
		padding: 0 40rpx;
		background-color: #FFFFFF;
		border-radius: 20rpx;

		.popup-title {
			text-align: center;
			color: $uni-color-black;
			font-size: $uni-font-size-xlg;
			font-weight: bold;
			margin: 60rpx 0 40rpx 0;
		}

		.popup-subhead {
			text-align: center;
			color: $uni-color-black;
			font-size: $uni-font-size-base;
		}
		.input{
			margin: 45rpx 0;
			justify-content: center;

			::v-deep.u-code-input__item{
				background-color: rgba(235, 235, 235, 1);
				border-radius: 10rpx;
				border: 0 !important;
			}

		}

		.popup-bottom {
			width: 100%;
			justify-content: space-around;
			margin-bottom: 40rpx;

			view {
				width: 235rpx;
				height: 80rpx;

			}

			.popup-bottom-cancel {
				border: 0;
				border-radius: 40rpx;
				background-color: rgba(247, 247, 247, 1);
				font-size: $uni-font-size-base;
				color: rgba(178, 180, 181, 1);
			}
			.popup-bottom-cancel:after{
				border: 0;
			}

			.popup-bottom-confirm {
				border: 0;
				border-radius: 40rpx;
				background-color: rgba(0, 0, 0, 1);
				font-size: $uni-font-size-base;
				color: #FFFFFF;
			}

			.popup-bottom-confirm:after{
				border: 0;
			}

		}
	}
</style>
